<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/WEB-INF/views/system/taglibs.jsp" %>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        .main {
            max-width: 600px;
            height: 100%;
            margin: 0 auto;
        }

        .header {
            width: 100%;
            text-align: center;
            height: 200px;
            overflow: hidden;
            background: #cccccc;
        }

        .header img {
            height: 100%;
        }

        .content,
        .title,
        .middle {
            padding-left: 12px;
            padding-right: 12px;
        }

        .content,
        .title,
        .middle > div {
            position: relative;
            height: 35px;
            font-size: 20px;
            line-height: 35px;
            margin-bottom: 10px;
        }

        .left {
            font-size: 16px;
        }

        .right {
            font-size: 13px !important;
            position: absolute;
            right: 0;
            top: 0;
            width: 150px;
            height: 100%;
            text-align: right;
            word-break: break-all;
            word-wrap: break-word;
        }

        .start-time,
        .end-time {
            position: absolute;
            right: 0;
            height: 17px;
            font-size: 13px;
            line-height: 17px;
        }

        .start-time {
            top: 0;
        }

        .end-time {
            bottom: 0;
        }

        .joincount {
            float: right;
        }

        .joincount span {
            color: #ffa729;
        }

        .content .item:before {
            position: absolute;
            left: 0;
            height: 15px;
            border: 3px solid #ffa729;
            content: "";
            top: 50%;
            margin-top: -10px;
        }

        .tag {
            color: #fff;
            background: #00a500;
            border-radius: 2px;
            font-size: 12px;
            margin-left: 5px;
            padding: 2px 5px;
        }
    </style>
</head>
<body>
<div class="main">
    <!-- 图片 -->
    <div class="header">
        <img src="" alt="" class="titleImages">
    </div>
    <!-- 标题、类型、参与人数 -->
    <div class="title item">
        <span class="title_content">
            ${title}
            <c:if test="${not empty types}">
                <span class="tag">${types}</span>
            </c:if>
        </span>
        <span class="joincount">
            <span>${joinCount}</span>/${limitCount}人
        </span>
    </div>
    <div class="middle">
        <!-- 时间 -->
        <div class="time">
            <div class="left">
                <%--<img src="" alt="时间">--%>
                <span>时间</span>
            </div>
            <div class="right">
                <span class="start-time">${startTime}</span>
                <span class="end-time">到${endTime}</span>
            </div>
        </div>
        <!-- 活动地点 -->
        <div class="address">
            <div class="left">
                <%--<img src="" alt="活动地点">--%>
                <span>活动地点</span>
            </div>
            <div class="right">
                <span>${address}</span>
            </div>
        </div>
        <!-- 费用 -->
        <div class="cost">
            <div class="left">
                <%--<img src="" alt="费用">--%>
                <span>费用</span>
            </div>
            <div class="right">
                <span>${cost}</span>
            </div>
        </div>
        <!-- 他们也参与了 -->
        <div class="join">
            <div class="left">
                <%--<img src="" alt="他们也参与了">--%>
                <span>他们也参与了</span>
            </div>
            <div class="right">
                <span>${joinCount}</span>人
            </div>
        </div>
    </div>

    <!-- 活动详情 -->
    <div class="content">
        <div class="item">活动详情</div>
        <span style=" font-size: 16px;">
            ${content}
        </span>
    </div>

</div>
</body>
<script type="text/javascript">
    $(function () {
        // 图片列表
        var imgs = '${images}', image;
        if (!!imgs) {
            if (imgs.indexOf(",")) {
                image = imgs.split(",")[0];
            } else {
                image = imgs;
            }
            $(".header img").attr("src", image);
        }
    });
</script>
</html>